<template>
  <div>
    <h3>App</h3>
    <ul>
        <!-- to属性 方式一：字符串 -->
        <li><router-link to="/home" active-class="active">Home</router-link></li>
        <li><router-link to="/about" active-class="active">About</router-link></li>
        <!-- to属性方式二： 对象 -->
        <li><router-link :to="{path:'/home'}" active-class="active">Home</router-link></li>
        <li><router-link :to="{path:'/about'}" active-class="active">About</router-link></li>
    </ul>
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',
  mounted() {
    console.log('App this: ', this)
  },
}
</script>

<style>
.active{
    color:red;
}
</style>